<template>
  <div class="user-center-dedicated">
    <!-- ==================== 侧边栏模块 ==================== -->
    <div class="sidebar">
      <div class="user-info">
        <n-avatar
          :src="userInfo.avatar || websiteConfig.userImage"
          :size="70"
          color="#ffffff"
          round
        />
        <h3 class="username">{{ userInfo.username }}</h3>
        <p class="user-id">ID: {{ userInfo.phone }}</p>
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-number">{{ figureInfo.subscribeCount }}</span>
            <span class="stat-label">订阅</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ figureInfo.followersCount }}</span>
            <span class="stat-label">粉丝</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ figureInfo.followingCount }}</span>
            <span class="stat-label">关注</span>
          </div>
        </div>
      </div>

      <nav class="nav-menu">
        <div
          v-for="item in menuItems"
          :key="item.key"
          :class="['nav-item', { active: activeTab === item.key }]"
          @click="activeTab = item.key"
        >
          <div class="nav-item-content">
            <!--            <span class="nav-icon">{{ item.icon }}</span>-->
            <img
              class="nav-icon"
              :src="activeTab === item.key ? item.selectedIcon : item.icon"
              alt=""
            />
            <span class="nav-text">{{ item.label }}</span>
            <div class="nav-indicator"></div>
          </div>
        </div>
      </nav>
    </div>

    <!-- ==================== 主内容区域 ==================== -->
    <div class="main-content">
      <!-- ==================== 个人信息模块 ==================== -->
      <user-info v-if="activeTab === 'profile'" />

      <!-- ==================== 账号设置模块 ==================== -->
      <account-settings v-if="activeTab === 'settings'" />

      <!-- ==================== 我的订阅模块 ==================== -->
      <subscribe-course v-if="activeTab === 'subscriptions'" />

      <!-- ==================== 消息中心模块 ==================== -->
      <message-center v-if="activeTab === 'messages'" />

      <!-- ==================== 浏览记录模块 ==================== -->
      <history v-if="activeTab === 'history'" />

      <!-- ==================== 我的钱包模块 ==================== -->
      <wallet v-if="activeTab === 'wallet'" />

      <!-- ==================== 粉丝列表模块 ==================== -->
      <fans v-if="activeTab === 'fans'" />

      <!-- ==================== 关注列表模块 ==================== -->
      <follows v-if="activeTab === 'following'" />
    </div>
  </div>
</template>

<script setup>
  import icon1 from '@/assets/icons/user/icon1.png';
  import icon2 from '@/assets/icons/user/icon2.png';
  import icon3 from '@/assets/icons/user/icon3.png';
  import icon4 from '@/assets/icons/user/icon4.png';
  import icon5 from '@/assets/icons/user/icon5.png';
  import icon6 from '@/assets/icons/user/icon6.png';
  import icon7 from '@/assets/icons/user/icon7.png';
  import icon8 from '@/assets/icons/user/icon8.png';
  import icon11 from '@/assets/icons/user/icon1-1.png';
  import icon21 from '@/assets/icons/user/icon2-1.png';
  import icon31 from '@/assets/icons/user/icon3-1.png';
  import icon41 from '@/assets/icons/user/icon4-1.png';
  import icon51 from '@/assets/icons/user/icon5-1.png';
  import icon61 from '@/assets/icons/user/icon6-1.png';
  import icon71 from '@/assets/icons/user/icon7-1.png';
  import icon81 from '@/assets/icons/user/icon8-1.png';
  import UserInfo from './components/UserInfo.vue';
  import AccountSettings from './components/AccountSettings.vue';
  import SubscribeCourse from './components/SubscribeCourse.vue';
  import MessageCenter from './components/MessageCenter.vue';
  import History from './components/History.vue';
  import Wallet from './components/Wallet.vue';
  import Fans from './components/Fans.vue';
  import Follows from './components/Follows.vue';
  import { ref, onMounted, watch, nextTick } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { websiteConfig } from '@/config/website.config';
  import { getUserCenterInfoApi } from '@/api/system/user';

  const activeTab = ref('profile');

  // 用户信息
  const userStore = useUserStore();

  const userInfo = ref({});

  // 菜单项
  const menuItems = [
    { key: 'profile', label: '个人信息', icon: icon1, selectedIcon: icon11 },
    { key: 'settings', label: '账号设置', icon: icon2, selectedIcon: icon21 },
    { key: 'subscriptions', label: '我的订阅', icon: icon3, selectedIcon: icon31 },
    { key: 'messages', label: '消息中心', icon: icon4, selectedIcon: icon41 },
    { key: 'history', label: '浏览记录', icon: icon5, selectedIcon: icon51 },
    { key: 'wallet', label: '我的钱包', icon: icon6, selectedIcon: icon61 },
    { key: 'fans', label: '粉丝列表', icon: icon7, selectedIcon: icon71 },
    { key: 'following', label: '关注列表', icon: icon8, selectedIcon: icon81 },
  ];

  const figureInfo = ref({
    subscribeCount: 0,
    followersCount: 0,
    followingCount: 0,
  });

  async function getUserCenterInfo() {
    try {
      const data = await getUserCenterInfoApi();
      figureInfo.value = data;
    } catch (error) {
      console.error('error:', error);
    }
  }

  watch(
    () => userStore.info,
    async (newValue) => {
      await nextTick();
      userInfo.value = newValue;
    },
    {
      immediate: true,
      deep: true,
    }
  );

  onMounted(() => {
    getUserCenterInfo();
  });
</script>

<style lang="less">
  // ==================== 整体布局样式 ====================
  .user-center-dedicated {
    display: flex;
    height: calc(100vh - 80px);
    position: relative;
    overflow: hidden;
    max-width: 1500px;
    margin: 0 auto;

    // ==================== 侧边栏样式 ====================
    .sidebar {
      width: 320px;
      background: rgba(255, 255, 255, 0.95);
      position: relative;
      display: flex;
      flex-direction: column;

      .user-info {
        text-align: center;
        padding: 20px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.5);

        .username {
          margin: 0 0 8px;
          font-size: 22px;
          color: #1e293b;
          background: linear-gradient(135deg, #bb36c3, #d174df);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .user-id {
          margin-bottom: 10px;
          color: #64748b;
          font-size: 14px;
          font-weight: 500;
        }

        .user-stats {
          display: flex;
          justify-content: space-around;
          padding: 16px;
          background: linear-gradient(135deg, #f8fafc, #e2e8f0);
          border-radius: 12px;
          margin: 0 16px;

          .stat-item {
            text-align: center;

            .stat-number {
              display: block;
              font-size: 18px;
              font-weight: 700;
              color: #bb36c3;
            }

            .stat-label {
              font-size: 12px;
              color: #64748b;
              font-weight: 500;
            }
          }
        }
      }

      .nav-menu {
        flex: 1;
        padding: 24px 0;
        overflow-y: auto;
        overflow-x: hidden;

        .nav-item {
          margin: 4px 16px;
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          color: #64748b;
          position: relative;
          overflow: hidden;

          &:hover {
            background: linear-gradient(135deg, rgba(0, 125, 214, 0.2), rgba(209, 116, 223, 0.2));
            color: #d174df;
            transform: translateX(4px);
          }

          &.active {
            background: linear-gradient(135deg, #007dd6, #d174df);
            color: white;
            box-shadow: 0 4px 16px rgba(209, 116, 223, 0.3);

            .nav-indicator {
              opacity: 1;
              transform: scale(1);
            }
          }

          .nav-item-content {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            position: relative;

            .nav-icon {
              margin-right: 16px;
              width: 20px;
              display: block;
              transition: transform 0.3s ease;
            }

            .nav-text {
              font-weight: 600;
              font-size: 15px;
              flex: 1;
            }

            .nav-indicator {
              position: absolute;
              right: 16px;
              width: 8px;
              height: 8px;
              background: white;
              border-radius: 50%;
              opacity: 0;
              transform: scale(0);
              transition: all 0.3s ease;
            }
          }

          &:hover .nav-icon {
            transform: scale(1.1);
          }
        }
      }
    }

    // ==================== 主内容区域样式 ====================
    .main-content {
      flex: 1;
      height: calc(100vh - 80px);
      padding: 24px 0 24px 24px;
      position: relative;
      z-index: 5;
      overflow: hidden;

      .content-section {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 10px;
        padding: 24px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
        height: 100%;

        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 10px;
          border-bottom: 2px solid rgba(226, 232, 240, 0.3);

          .section-title {
            font-size: 24px;
            color: #1e293b;
            display: flex;
            align-items: center;
            gap: 12px;

            .title-icon {
              font-size: 30px;
              background: linear-gradient(135deg, #ce74df, #00ddd6);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
            }
          }

          .section-subtitle {
            margin-top: 8px;
            color: #64748b;
            font-size: 16px;
            font-weight: 500;
          }
        }
      }
    }
  }

  // ==================== 按钮样式 ====================

  @media (max-width: 768px) {
    .user-center-dedicated {
      flex-direction: column;

      .sidebar {
        width: 100%;
        height: auto;
        order: 2;
        max-height: 200px;

        .user-info {
          padding: 16px 24px;
          border-bottom: none;

          .user-stats {
            margin: 0;
            padding: 12px;
          }
        }

        .nav-menu {
          display: flex;
          overflow-x: auto;
          overflow-y: hidden;
          padding: 12px 0;
          flex: none;

          .nav-item {
            flex-shrink: 0;
            margin: 0 8px;
            border-radius: 20px;
            border-right: none;

            .nav-item-content {
              padding: 12px 20px;
            }

            &.active {
              background: linear-gradient(135deg, #4a90e2, #50c878);
              color: white;
            }
          }
        }
      }

      .main-content {
        order: 1;
        padding: 16px;
        height: calc(100vh - 200px);

        .content-section {
          padding: 20px;
        }
      }

      .course-grid {
        grid-template-columns: 1fr;
        max-height: 400px;
      }

      .wallet-overview {
        grid-template-columns: 1fr;
      }

      .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .subscription-stats {
        align-self: stretch;
        justify-content: space-around;
      }

      .history-item {
        flex-direction: column;
        align-items: flex-start;

        .history-cover-container {
          margin-right: 0;
          margin-bottom: 16px;
          align-self: center;
        }
      }

      // 移动端列表高度调整
      .message-list,
      .history-list,
      .user-list {
        max-height: 300px;
      }

      .transactions-list {
        max-height: 250px;
      }
    }
  }
</style>
